<template>
  <div class="index-container">
    <el-row :gutter="12">
      <el-col :span="12">
        <el-card header="快捷入口">
          <template #header>
            <div class="shortcuts-card-header">
              <span>快捷入口</span>
              <el-button
                :icon="Plus"
                link
                type="primary"
                @click="toAddFastRoute"
              >
                新增
              </el-button>
            </div>
          </template>
          <el-row :gutter="6">
            <el-col
              v-for="item in state.fastRouteList"
              :key="item.path"
              :span="8"
            >
              <div class="fast-route-item" @click="toMenu(item)">
                <vab-icon :icon="item.icon" />
                {{ item.title }}
              </div>
            </el-col>
          </el-row>
        </el-card>
        <el-card header="系统预警">
          <el-timeline>
            <el-timeline-item
              v-for="(warnItem, index) in state.earlyWarningList"
              :key="index"
              center
              placement="top"
              :timestamp="warnItem.timestamp"
            >
              <el-card>
                <h4>{{ warnItem.title }}</h4>
                <p>{{ warnItem.content }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="备忘录">
          <el-calendar v-model="state.today">
            <template #date-cell="{ data }">
              <div class="calenday-day-content" @click="toRemark(data)">
                <div>
                  {{ showDay(data) }}
                </div>
                <el-popover
                  :content="data && data.day && state.remarkMap[data.day]"
                  :title="data.day"
                  trigger="hover"
                >
                  <template #reference>
                    <div class="remark-content">
                      {{ data && data.day && state.remarkMap[data.day] }}
                    </div>
                  </template>
                </el-popover>
              </div>
            </template>
          </el-calendar>
        </el-card>
        <el-card header="我的公告">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in noticeList"
              :key="index"
              :color="activity.color"
              :hollow="activity.hollow"
              :icon="activity.icon"
              :size="activity.size"
              style="cursor: pointer"
              :timestamp="activity.createTime"
              :type="activity.type"
              @click="toDetail(activity)"
            >
              {{ activity.showInfo }}
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
    <RemarkContent ref="remarkContentRef" @save-callback="saveCallback" />
    <CheckFastRoute ref="checkFastRouteRef" @save-callback="saveCallback" />
  </div>
</template>
<script setup>
  import RemarkContent from './dialog/RemarkContent.vue'
  import CheckFastRoute from './dialog/CheckFastRoute.vue'
  import { noticeStore } from '~/src/store/modules/notice'
  import { Plus } from '@element-plus/icons-vue'
  const router = useRouter()

  const $baseAlert = inject('$baseAlert')
  const remarkContentRef = ref()
  const checkFastRouteRef = ref()
  const { noticeList } = storeToRefs(noticeStore())
  const toDetail = () => {}
  const state = reactive({
    today: new Date(),
    remarkMap: {},
    fastRouteList: [],
    activities: [],
    earlyWarningList: [],
  })
  const toMenu = (item) => {
    router.push(item.path)
  }
  const toAddFastRoute = () => {
    checkFastRouteRef.value.openHandle(state.fastRouteList)
  }
  const showDay = (data) => {
    if (!data || !data.day) return ''
    const days = data.day.split('-')
    if (!days || days.length === 0) return ''
    return days[days.length - 1]
  }
  const refreshRemarkData = () => {
    const remarkMapStr = localStorage.getItem('remarkMap')
    if (remarkMapStr) {
      state.remarkMap = JSON.parse(remarkMapStr)
    }
  }
  const refreshFastRoutes = () => {
    const fastRoutesStr = localStorage.getItem('fastRoutes')
    if (fastRoutesStr) {
      state.fastRouteList = JSON.parse(fastRoutesStr)
    }
  }
  const toRemark = (data) => {
    if (data && state.remarkMap[data.day]) {
      $baseAlert(state.remarkMap[data.day], '')
    } else {
      remarkContentRef.value.openHandle(data.day)
    }
  }
  const saveCallback = () => {
    refreshRemarkData()
    refreshFastRoutes()
  }
  onMounted(() => {
    refreshRemarkData()
    refreshFastRoutes()
  })
</script>
<style lang="scss" scoped>
  .index-container {
    .fast-route-item {
      line-height: 28px;
      color: #1890ff;
      cursor: pointer;
      &:hover {
        color: #3375b9;
        background-color: #f0f0f0;
      }
    }
    .shortcuts-card-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .calenday-day-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 6px;
      .remark-content {
        display: inline-block;
        width: 100%;
        margin-top: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    :deep() {
      .el-card__header {
        padding: 12px;
      }
      .el-card__body {
        padding: 12px;
      }
      .el-calendar {
        .el-calendar__header {
          padding: 6px 12px;
        }
        .el-calendar__body {
          padding: 6px 12px 12px;
        }
        .el-calendar-table .el-calendar-day {
          position: relative;
          height: 72px;
        }
        .el-calendar-table thead th {
          padding: 6px 0;
        }
      }
    }
  }
  // .index-container {
  //   display: flex;
  //   flex-direction: row;
  //   justify-content: space-between;
  //   padding: 0 !important;
  //   background: $base-color-background !important;
  //   .zuo {
  //     display: flex;
  //     flex: 1;
  //     flex-direction: column;
  //     justify-content: space-between;
  //   }
  //   .you {
  //     display: flex;
  //     flex: 1;
  //     flex-direction: column;
  //     justify-content: space-around;
  //   }
  // }
</style>
